<!--  -->
<template>
  <div class="uploadContainer">
    <el-upload
    ref="upload"
    style="display:inline-block"
    :action="action"
    :on-error="errorAuth"
    :on-success="successAuth"
    :before-upload=" (file) =>  { return beforeUpload(file, index)}"
    :data="uploadData"
    :multiple="multiple"
    :headers="headers"
    :limit="limit"
    :show-file-list="true"
    :accept="accept"
    :drag="isDrag"
    :auto-upload="autoupload"
    :disabled="disabled"
    :on-change="onChange"
    :on-remove="handleRemove"
    >
    <el-button v-preventReClick slot="trigger" size="small" type="primary"><slot></slot></el-button>
    </el-upload>
  </div>
</template>

<script>
import {getBaseHeader} from "@/utils/request";

export default {
  props:{
      autoupload:{
        type:Boolean,
        default:true
      },
      fileList:{
        type:Array,
        default:[]
      },
      fileKey:{
        type:String,
      },
      data:{
          type:Object,
          required:false
      },
      btnType:{
          type:String,
            default: ''
      },
      largeScreen:{
          type:String,
          default: ''
      },
      fileType:{
          type: [Array]
      },
      multiple:{
          type:Boolean,
          default:true
      },
      limit:{
        type:Number,
        default:99
      },
      accept:{
        type:String,
        default:''
      },
      isDrag:{
        type:Boolean,
        default:false
      },
      isIcon:{
        type:Boolean,
        default:false
      },
      otherFiles:{
        type:Boolean,
        default:false
      },
      isBorder:{
        type:Boolean,
        default:false
      },
      disabled:{
          type:Boolean,
        default:false
      },
      index:{
          type:String,
            default: ''
      },
      isPro:{
        type:String,
            default: ''
      },
      action:{
        type:String,
        default: ''
      }
  },
  components: {},
  data() {
    return {
        uploadData:{
            // channelNo:"anysign",
            // storeType:1
        },
         // 设置上传的请求头部
        headers: getBaseHeader(),
    }
  },
  created() {
      // this.action = uploadFile();
  },

  methods: {
    submit(){
      this.$refs.upload.submit();
    },
    clearFiles(){
      this.$refs.upload.clearFiles();
    },
    handleRemove(file, fileList) {
        console.log(file, fileList,'1111');
      },
       beforeUpload(file,index){
        let limitFive = 50*1024*1024//最大小不超过50M
         let limitTree = 30*1024*1024//最大小不超过30M
         let limit = 0
         const isLt2M = file.size / 1024 / 1024 < 10;
        //  console.log(this.fileList,'this.fileList')
         this.fileList.forEach(item=>{
           limit+=item.size
         })
        let testmsg = file.name.substring(file.name.lastIndexOf('.') + 1) //文件类型
          //  console.log(file.size,'file.size',limit,'limit')
            limit+=file.size
           //  console.log(limit,"limit")
        if (limit > limitFive) {
          this.$message.error('上传文件总大小不能超过50MB!');
          return false;
         } else if (testmsg == "docx" || testmsg == "doc") { //限制word类型30M
        if (limitTree-file.size<0) {
        this.$message.error('上传word文件总大小不能超过30M!');
                    return false;
        }
          }
           if(this.fileType){
          if (this.fileType.indexOf(testmsg)==-1) {
          this.$message.error('文件格式上传错误!');
          return false;
          }
                this.$emit("beforeUpload",file,index)
          }else{
          this.$emit("beforeUpload",file,index)
          }
      },
      successAuth(res, file,FileList){
          if(res.code !== 0){
            this.$message.error(res.msg || '出错了')
            return;
          }
          console.log(res.data.fileKey,'res.data.fileKey',this.$parent.$parent.$parent.$parent)
          this.$parent.$parent.$parent.$parent.successUser(res.data.fileKey)
      },
      errorAuth(err,file,fileList){
        this.$message.error("上传失败")
        this.$emit("errorAuth",file,err)
      },
      reloadFile(row){
        retry(row.fileId).then((res)=>{
          this.$emit("successAuth",res, row,this.index)
        })
        .catch((err)=>{
          this.$emit("errorAuth",row, err)
        })
      },
      onChange(file, fileList){
         this.$emit('change')
      }
  }
}

</script>
<style  scoped lang='scss'>
::v-deep .el-upload-dragger{
  width: 80px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 2px;
}
::v-deep .el-icon-paperclip{
  margin-right: 7px;
}
</style>
